import { ShopTabControlWrapper } from "./style";
import React, { memo, useState } from "react";

export default memo(function Tabcontrol(props) {
  const { categoryList, tabcontrolClick } = props;
  const [currentIndex, setcurrentIndex] = useState(0);
  const categoryClick = (id, index) => {
    console.log(id);
    setcurrentIndex(index);
    tabcontrolClick(id);
  };
  return (
    <ShopTabControlWrapper>
      <div className="shop-category">
        {categoryList.map((item, index) => {
          return (
            <div
              className={
                "category-item " +
                (index === currentIndex ? "shop-category-active" : "")
              }
              onClick={() => categoryClick(item.id, index)}
              key={item.id}
            >
              {item.name}
            </div>
          );
        })}
      </div>
    </ShopTabControlWrapper>
  );
});
